<template>
	<u-popup :show="showPopup" :overlayStyle="{background: 'rgba(255, 255, 255, 1)'}">
		<view class="select-peopleBox">
			<view style="height: 100rpx">
				<view class="searchBox">
					<u--input class="inputBtn" v-model="params.keywords" placeholder="输入关键字搜索" prefixIcon="search"
						prefixIconStyle="font-size: 40rpx;color: #909399" />
					<view class="searchBtn" @click="handleSerch">搜索</view>
				</view>
			</view>
			<base-loading :flag="showLoading"/>
			<scroll-view scroll-y style="height: 78vh;" @scrolltolower="scrolltolower">
				<u-radio-group v-model="oddSelectValue" placement="column">
					<view class="box" v-for="(item,index) in list" :key="item.id">
						<view>
							<view class="flex mb30">
								<view class="name w160">姓名：</view>
								<view class="value">{{item.userName}}</view>
							</view>
							<view class="flex mb20">
								<view class="name w160">所属部门：</view>
								<view class="value" style="padding-right: 50rpx;">{{item.deptPath}}</view>
							</view>
							<view class="flex mb30">
								<view class="name w160">角色名称：</view>
								<view class="value">{{item.roleNames}}</view>
							</view>
						</view>
						<view class="flex mb30">
							<u-radio shape="circle" :name="item.id"></u-radio>
						</view>
					</view>
				</u-radio-group>
			</scroll-view>
			<view class="btn-view">
				<view class="cancelBtn" @click="quit">取消</view>
				<view class="sureBtn" @click="sureBtn">确定</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			selfFlag:{
				type:String,
				default:''
			},
			show: {
				type: Boolean,
				default: false
			},
			roleCode:{
				type:String,
				default:'inner_basic_role,outer_basic_role'
			},
			event:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				showLoading:false,
				itemCount:0,//总数
				showPopup: false,
				list: [],
				oddSelectValue: '',//选择的id
				params:{
					selfFlag:'',
					keywords:'',
					pageIndex:1,
					pageSize:10,
					roleCode:''
				}
			}
		},
		created() {
			this.showPopup = this.show
		},
		watch: {
			show(newValue) {
				this.params.roleCode = this.roleCode
				this.params.selfFlag = this.selfFlag
				this.showPopup = newValue
				if(this.showPopup){
					this.oddSelectValue=''
					this.params.pageIndex = 1
					this.list = []
					this.requestList()
				}
			}
		},
		methods: {
			scrolltolower() {
				console.log('到底')
				if(this.itemCount>this.list.length){
					this.params.pageIndex++
					this.requestList()
				}
			},
			async requestList(){
				this.showLoading = true
				let {resultValue:res} = await this.request(this.$api.getUserVOPageList,this.params,'GET')
				setTimeout(()=>{
					this.showLoading = false
					this.list = this.list.concat(res.items)
					this.itemCount = res.itemCount
				},300)
			},
			//搜索框
			handleSerch(){
				this.params.pageIndex = 1
				this.list = []
				this.requestList()
				this.params.keywords = ""
			},
			//点击退出
			quit() {
				this.showPopup = false
				this.$emit("showPopup", this.showPopup)
			},
			//点击提交
			sureBtn() {
				if(this.event){
					this.list.forEach(item=>{
						if(item.id==this.oddSelectValue){
							this.$emit('listItem',item)
						}
					})
				}else{
					this.list.forEach(item=>{
						if(item.id==this.oddSelectValue){
							item.unitPath = item.unitPath.slice(item.unitPath.lastIndexOf('/')+1,item.unitPath.length)
							this.$emit('listItem',item)
							this.showPopup = false
							this.$emit("showPopup", this.showPopup)
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	.w160{
		width: 180rpx;
	}
	>>>.uni-input-input{
		text-align: left!important;
	}
	.select-peopleBox {
		height: calc(100vh - var(--status-bar-height));
		background-color: #F7F8FA;
		position: relative;
	}

	.searchBox {
		box-sizing: border-box;
		height: 100rpx;
		position: fixed;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 520;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
	}

	.inputBtn {
		width: calc(100% - 360rpx);
		height: 60rpx;
		background-color: #F5F6F9;
		box-sizing: border-box;
		border: none;
		font-size: 28rpx;
	}

	.iponeBtn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #F5F6F9;
		color: #65717D;
		text-align: center;
		border-radius: 12rpx;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.searchBtn {
		width: 140rpx;
		height: 60rpx;
		background-color: #3473F9;
		color: #fff;
		text-align: center;
		line-height: 60rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: url(../../../static/workPeopleBj.png);
		background-size: 100% 100%;
		margin: 20rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 2px 4px 0 rgba(237, 237, 237, 0.50);
	}

	.name {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #89939E;

	}

	.value {
		width: 70%;
		padding-left: 10rpx;
		flex: 1;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.btn-view {
		position: fixed;
		bottom: 40rpx;
		z-index: 123;
		background-color: #FFFFFF;
		padding: 60rpx 40rpx 0;
		box-sizing: border-box;
		display: flex;
		width: 100%;
	}

	.cancelBtn {
		width: 50%;
		height: 80rpx;
		border: 2rpx solid #3473F9;
		color: #3473F9;
		box-sizing: border-box;
		text-align: center;
		line-height: 80rpx;
		border-radius: 14rpx;
		font-size: 32rpx;
	}

	.sureBtn {
		width: 50%;
		height: 80rpx;
		background-color: #3473F9;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		margin-left: 20rpx;
		border-radius: 14rpx;
		font-size: 32rpx;
	}
</style>
